<template>
  <div class="pages">
    <Nav :navList="navList">
      <div slot="login">
        <span style="margin-right: 30px">当前用户：{{username}}</span>
        <el-button @click="tologin">退出登录</el-button>
      </div>
    </Nav>
    <div class="pages-content">
      <router-view/>
    </div>
  </div>
</template>

<script>
import Nav from "../components/admin/Nav";

export default {
  name: "Pages",
  components: {
    Nav
  },
  data() {
    return {
      navList: [
        {
          route: "/loan",
          text: "借贷管理"
        },
        {
          route: "/yunying",
          text: "运营活动"
        },
        {
          route: "/content/banner",
          text: "内容管理",
        },
        {
          route: "/member",
          text: "用户管理"
        },
        {
          route: "/admin",
          text: "系统管理"
        },
        {
          route: "/repayment",
          text: "统计分析"
        },
      ],
      username: ""
    }
  },
  methods: {
    tologin() {
      this.$router.push('/login');
      localStorage.removeItem('user')
    }
  },
  beforeMount() {
    this.username = JSON.parse(localStorage.getItem('user')).name;
    let userRole = JSON.parse(localStorage.getItem('user')).userRoles;
    let newUser = [];
    let tableArr = [];
    for (let i = 0; i < userRole.length; i++) {
      let jiequ = '';
      if (userRole[i].indexOf('/', 1) > -1) {
        jiequ = userRole[i].substring(0, userRole[i].indexOf('/', 1))
      } else {
        jiequ = userRole[i]
      }
      newUser.push(jiequ)
    }
    for (let j = 0; j < this.navList.length; j++) {
      let jiequ = '';
      if (this.navList[j].route.indexOf('/', 1) > -1) {
        jiequ = this.navList[j].route.substring(0, this.navList[j].route.indexOf('/', 1))
      } else {
        jiequ = this.navList[j].route
      }
      tableArr.push(jiequ)
    }
    this.navList = this.navList.filter((item, index) => {
      if (newUser.indexOf(tableArr[index]) > -1) return item
    })
    this.navList.unshift({
      route: "/",
      text: "首页"
    })
  }
}
</script>

<style lang="less" scoped>
.pages {
  height: 100%;
}

.pages-content {
  height: calc(100% - 50px);
  background-color: lightgreen;
}

</style>